<template>
  <div class="statistics">
    <h1 class="page-title">统计分析</h1>
    
    <div class="card">
      <div class="time-selector">
        <el-radio-group v-model="timeDimension" @change="loadData">
          <el-radio-button label="1d">近1天</el-radio-button>
          <el-radio-button label="7d">近7天</el-radio-button>
          <el-radio-button label="30d">近30天</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="card">
          <h3>日志量趋势</h3>
          <v-chart :option="trendOption" style="height: 400px" autoresize />
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="card">
          <h3>日志级别分布</h3>
          <v-chart :option="levelOption" style="height: 350px" autoresize />
        </div>
      </el-col>
      
      <el-col :span="12">
        <div class="card">
          <h3>系统分布</h3>
          <v-chart :option="systemOption" style="height: 350px" autoresize />
        </div>
      </el-col>
    </el-row>
    
    <div class="card">
      <h3>高频错误 TOP5</h3>
      <v-chart :option="errorOption" style="height: 350px" autoresize />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getStatistics, getDashboardOverview } from '@/api/dashboard'

const timeDimension = ref('7d')
const loading = ref(false)

const trendOption = reactive({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: [],
    smooth: true,
    areaStyle: {
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ]
      }
    }
  }]
})

const levelOption = reactive({
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: []
  }]
})

const systemOption = reactive({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [],
    itemStyle: {
      borderRadius: [10, 10, 0, 0],
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ]
      }
    }
  }]
})

const errorOption = reactive({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'value' },
  yAxis: { type: 'category', data: [] },
  series: [{
    type: 'bar',
    data: [],
    itemStyle: { color: '#f56c6c', borderRadius: [0, 10, 10, 0] }
  }]
})

// 加载统计数据
const loadData = async () => {
  loading.value = true
  try {
    // 根据时间维度计算天数
    const daysMap = {
      '1d': 1,
      '7d': 7,
      '30d': 30
    }
    const days = daysMap[timeDimension.value] || 7
    
    // 加载统计数据（带时间参数）
    const statsRes = await getStatistics(days)
    if (statsRes.code === 200 && statsRes.data) {
      const data = statsRes.data
      
      // 更新日志级别分布（饼图）
      if (data.logLevelDistribution && data.logLevelDistribution.length > 0) {
        levelOption.series[0].data = data.logLevelDistribution.map(item => ({
          name: item.logLevel || item.log_level || 'UNKNOWN',
          value: item.count || 0
        }))
      } else {
        levelOption.series[0].data = []
      }
      
      // 更新系统分布（柱状图）
      if (data.systemTypeDistribution && data.systemTypeDistribution.length > 0) {
        systemOption.xAxis.data = data.systemTypeDistribution.map(item => 
          item.systemType || item.system_type || 'UNKNOWN'
        )
        systemOption.series[0].data = data.systemTypeDistribution.map(item => 
          item.count || 0
        )
      } else {
        systemOption.xAxis.data = []
        systemOption.series[0].data = []
      }
      
      // 更新日志趋势图（从统计数据中获取）
      if (data.logTrend && data.logTrend.length > 0) {
        trendOption.xAxis.data = data.logTrend.map(item => item.time)
        trendOption.series[0].data = data.logTrend.map(item => item.count)
      } else {
        trendOption.xAxis.data = []
        trendOption.series[0].data = []
      }
    }
    
  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载统计数据失败')
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.statistics {
  .time-selector {
    margin-bottom: 20px;
  }
  
  h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
  }
}
</style>

